<template>
  <div id="app">
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="18">
            <UserList :userList="otherUserList" :is-admin="currentUser.group === 4" v-on:refresh="queryUsers"/>
          </el-col>
          <el-col :span="6">
            <UserInfo :user="currentUser" v-on:refresh="queryMe"/>
          </el-col>
        </el-row>
      </el-main>
    </el-container>


  </div>
</template>

<script>
import UserInfo from './UserInfo.vue'
import UserList from './UserList.vue'
import {postBackend} from "@/main";
import {ElNotification} from "element-plus";

export default {
  name: "UserManagePage",
  components: {
    UserInfo,
    UserList
  },
  methods: {
    queryUsers() {
      postBackend("/api/user/all", {}, res => {
        if (res.data.code === 0) {
          console.log(res.data)
          this.otherUserList = res.data.entity
        } else {
          ElNotification({
            title: '失败',
            message: '查询失败，原因: ' + res.data.msg,
            type: 'warning'
          })
        }
      }, err => {
        ElNotification({
          title: '失败',
          message: '查询失败，原因: ' + err.message,
          type: 'warning'
        })
      })
    },
    queryMe() {
      postBackend("/api/user/info", {}, res => {
        if (res.data.code === 1) {
          return
        }
        const group = res.data.entity.group
        this.currentUser = res.data.entity
        if (group !== 4) {
          return
        }
        this.queryUsers()
      }, err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.queryMe()
    })

  },
  data() {
    return {
      currentUser: {},
      otherUserList: []
    }
  }
}
</script>

<style>
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>

